<template>
  <div class="page-wrapper">
    <!-- 选择器 -->
    <h1 class="main-title">分配宿舍</h1>
    <div class="main-card wrapper">
      <el-button type="primary" @click="smartFenpei">智能分配</el-button>
      <el-button type="primary" @click="showModal">手动选择</el-button>
      <div id="percentage" v-show="showPercentageBar">
        <el-progress :percentage="percentage" :color="customColors" :text-inside="true"
          :stroke-width="20"></el-progress>
      </div>
    </div>
    <!-- 未分配宿舍学生信息 -->
    <h1 class="main-title">未分配宿舍学生</h1>
    <div class="main-card wrapper">
      <StudentTable :tableData="tableData" :tableLoading="tableLoading" :mutilSelect="true"
        @selectRowsOk="selectRowsOk" />
      <Pagination :total="count" :page="current" @pagination="handlePagination" :hidden="tableData.length === 0" />
    </div>
    <!-- 调剂宿舍模态框 -->
    <UserInfoEditModal :visible.sync="editModalVisible" :userInfo="tableData[0]" :userInfoList="selectRows"
      :once="true" />
  </div>
</template>

<script>
import StudentTable from '@/components/StudentTable'
import Pagination from '@/components/Pagination'
import UserInfoEditModal from './UserInfoEditModal'
import { getNoFenpeiInfo, autoFenpeiRoom } from '@/api/user'
import { deepClone } from '@/utils'

export default {
  name: 'Fenpei',
  components: {
    StudentTable,
    Pagination,
    UserInfoEditModal
  },
  data() {
    return {
      formData: {
        name: '',
        account: '',
        phone: '',
        password: '',
        role: 'student'
      },
      selectRows: [],
      editModalVisible: false,
      searchOption: {},
      current: 1,
      count: 0,
      step: 10,
      tableData: [],
      tableLoading: false,
      percentage: 0,
      showPercentageBar: false,
      customColors: [
        { color: '#f56c6c', percentage: 20 },
        { color: '#e6a23c', percentage: 40 },
        { color: '#5cb87a', percentage: 60 },
        { color: '#1989fa', percentage: 80 },
        { color: '#6f7ad3', percentage: 100 }
      ]
    }
  },
  mounted() {
    this.fetchTableData()
  },
  watch: {
    editModalVisible(newValue) {
      if(!newValue){
        this.fetchTableData()
      }
    }
  },
  methods: {
    showModal() {
      if (this.requireSelect()) {
        this.editModalVisible = true
      }
    },
    requireSelect() {
      if (this.selectRows.length === 0) {
        this.$message({
          type: 'error',
          message: '请选择学生'
        })
        return false
      }
      return true
    },
    smartFenpei() {
      this.percentage = 0
      this.tableLoading = true
      let timer = setInterval(() => {
        if (this.percentage < 100) {
          this.percentage += 1
        } else {
          clearInterval(timer)
          this.tableLoading = false
        }
      }, 200)
      this.$confirm(
        '智能分配将根据年级、专业、性别等因素来自动匹配 是否继续?',
        '提示',
        {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }
      )
        .then(async () => {
          this.showPercentageBar = true
          await autoFenpeiRoom()
            .then(result => {
              this.$message({
                type: 'success',
                message: result.msg
              })
              this.tableLoading = false
              this.fetchTableData()
              this.percentage = 100
            })
            .catch(() => {
              this.percentage = 100
            })
        })
        .catch(() => {
          this.$message({
            type: 'info',
            message: '取消自动分配'
          })
        })
    },
    selectRowsOk(selectRows) {
      this.selectRows = selectRows
    },
    fetchTableData() {
      console.log("RRRRRRRRRRR")
      const params = deepClone(this.searchOption)
      params.current = this.current
      params.step = this.step
      this.tableLoading = true
      //查询没有分配宿舍的学生
      getNoFenpeiInfo(params)
        .then(res => {
          this.tableData = res.data.rows
          this.count = res.data.count
        })
        .finally(() => {
          this.tableLoading = false
        })
    },
    handlePagination({ page, limit }) {
      this.current = page
      this.step = limit
      this.fetchTableData()
    }
  }
}
</script>

<style lang="scss" scoped>
.wrapper {
  margin: 40px 0;
}

#percentage {
  width: 50%;
  margin-top: 20px;
}
</style>
